<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑个人资料</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
 <style>
  body{
  background:none repeat scroll 0 0 #2E363F;
  font-family:'Open Sans', sans-serif;
  color:#08c;
  font-size:12px;
 }
 .widget-box{
  margin:20px auto;
   align:center;
 
}
  .form-horizontal .control-label{
   text-align:center;
   width:100px;
   
  }
  .form-horizontal .controls{
   margin-left:100px;
  }
  .div-btn{
   text-align:center;
   
  }
  .widget-title{
   text-align:center;
  }
  #att1,#att2,#att3,#att4,#att5{
   height:12px;
   color:red;
   margin-left:100px;
   
  }
  
 </style>
</head>
<body>
<div class="container-fluid">
 <div class="row-fluid">
  <div class="span12">
   <div class="widget-box">
    <div class="widget-title">
    <h5 id="tit">修改个人资料</h5>
   </div>
   <hr/>
    <div class="widget-content">
     <form  class="form-horizontal" method="post" name='form1'>
       <div class="control-group">
       <label class="control-label">姓名</label>
       <div class="controls">
        <input type="text" class="span11" name="name" value="${requestScope.user.name }" placeholder="姓名">
       </div>
       <div id="att1"></div>
      </div>
       <div class="control-group">
       <label class="control-label">手机号</label>
       <div class="controls">
        <input type="text" class="span11" name="phone" value="${requestScope.user.phone }" placeholder="您绑定账户的手机号">
       </div>
       <div id="att2"></div>
      </div>
      <div class="control-group">
       <label class="control-label">电子邮箱</label>
       <div class="controls">
        <input type="email" class="span11"  name="email" value="${requestScope.user.email }" placeholder="邮箱地址">
       </div>
        <div id="att3"></div>
      </div>
      <div class="control-group">
       <label class="control-label">在读学校</label>
       <div class="controls">
        <input type="text" class="span11" name="school" value="${requestScope.user.school}" placeholder="学校名称">
       </div>
         <div id="att4"></div>
      </div>
      <div class="control-group">
       <label class="control-label">在读年级</label>
       <div class="controls">
       <select class="span11" name="grade">
       <c:choose>
        <c:when test="${requestScope.user.grade eq 1}">
         <option selected  value="1">大一</option>
         <option value="2">大二</option>
         <option value="3">大三</option>
         <option value="4">大四</option>
        </c:when>
        <c:when test="${requestScope.user.grade eq 2}">
         <option value="1">大一</option>
         <option selected value="2">大二</option>
         <option value="3">大三</option>
         <option value="4">大四</option>
        </c:when>
        <c:when test="${requestScope.user.grade eq 3}">
         <option value="1">大一</option>
         <option value="2">大二</option>
         <option selected value="3">大三</option>
         <option value="4">大四</option>
        </c:when>
        <c:when test="${requestScope.user.grade eq 4}">
         <option value="1">大一</option>
         <option value="2">大二</option>
         <option value="3">大三</option>
         <option selected value="4">大四</option>
        </c:when>
       </c:choose>
       </select>
       </div>
       <div id="att5"></div>
      </div>
     </form>
     <div class="div-btn">
        <button class="btn btn-primary" type="submit" onclick="check3()">保存</button>
      </div>
    </div>
   </div>
  </div>
 </div>
</div>

<!-- Modal -->
<div id="myModal"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">提示：</h3>
  </div>
  <div class="modal-body">
      您的资料修改成功，请返回
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  </div>
 </div>

 <script src="js/jquery.min.js"></script>  
  <script src="js/bootstrap.min.js"></script>

 <script type="text/javascript">
 /*modal的大小位置设置*/
 $("document").ready(function(){
	 $('#myModal').modal("hide");//初始化时，隐藏模态框
 });

 var regexp=/^1[0-9]{10}/;
 var regexp2=/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/;
 
$("input[name='name']").blur(function(){
	if($(this).val()==""){
		$("#att1").empty();
		$("#att1").append("不能为空");
		return;
	}
});

$("input[name='name']").focus(function(){
	$("#att1").empty();
});
	
$("input[name='phone']").blur(function(){
	if(form1.phone.value==""){
		$("#att2").empty();
		$("#att2").append("不能为空");
		return;
	}
	if(!regexp.test(form1.phone.value)){
		$("#att").empty();
		$("#att2").append("手机号格式不正确");
		return;
	}
})
$("input[name='phone']").focus(function(){
	$("#att2").empty();

});

$("input[name='email']").blur(function(){
	if(form1.email.value==""){
		$("#att3").empty();
		$("#att3").append("不能为空");
		return;
	}
	if(!regexp2.test(form1.email.value)){
		$("#att3").empty();
		$("#att3").append("邮箱格式不正确");
		return;
	}
});
$("input[name='email']").focus(function(){
	$("#att3").empty();
});


$("input[name='shcool']").blur(function(){
	if($(this).value==""){
		$("#att4").empty();
		$("#att4").append("不能为空");
	}
	
});
$("input[name='school']").focus(function(){
	$("#att4").empty();
});

$("input[name='grade']").blur(function(){
	if($(this).val()==""){
		$("#att5").empty();
		$("#att6").append("不能为空");
	}
	
});
$("input[name='grade']").focus(function(){
	$("#att5").empty();
	
});

function check3(){
	if($("input[name='name'").val()==""){
		$("#att1").empty();
		$("#att1").append("不能为空");
		return false;
	}
	if($("input[name='phone'").val()==""){
		$("#att2").empty();
		$("#att2").append("不能为空");
		return false;
	}
	if(!regexp.test(form1.phone.value)){
		$("#att2").empty();
		$("#att2").append("手机号格式不正确");
		return false;
	}
	if($("input[name='email'").val()==""){
		$("#att3").empty();
		$("#att3").append("不能为空");
		return false;
	}
	if(!regexp2.test(form1.email.value)){
		$("#att3").empty();
		$("#att3").append("邮箱格式不正确");
		return;
	}
	if($("input[name='school'").val()==""){
		$("#att4").empty();
		$("#att4").append("不能为空");
		return false;
	}
	if($("input[name='grade'").val()==""){
		$("#att5").empty();
		$("#att5").append("不能为空");
		return false;
	}

	$.ajax({
		url:"<%=request.getContextPath() %>/member?method=mobile&page=edit",
	    type:"post",
	    datatype:"json",
	    data:{name:$("input[name='name']").val(),phone:$("input[name='phone']").val(),email:$("input[name='email']").val(),school:$("input[name='school']").val(),grade:$("select[name='grade']").val()},
		success:function(data){
			 $('#myModal').modal("show").css({
	 			    width: '300',
	 			    'margin-left': function () {
	 			       return -($(this).width() / 2)
	 			   }
	 		 });
	 		 $("#myModal .modal-body").css("overflow",'hidden');
		}
	});
	return false;
}

</script>
</body>
</html>